<template>
  <div class="app-container">
    <div style="margin-bottom: 10px">
      <span>人员爬虫监控</span>
    </div>
    <el-form
      :inline="true"
      class="demo-form-inline"
      size="small"
      label-position="right"
      label-width="80px"
    >
      <el-row>
        <el-col :span="5">
          <el-form-item label="爬虫名称:" prop="spiderName">
            <el-input
              v-model="formData.spiderName"
              placeholder="请输入爬虫名称"
              clearable
              @change="fetchData"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="负责人:" prop="manager">
            <el-select
              v-model="formData.manager"
              clearable
              placeholder="请选择负责人"
              @change="fetchData"
            >
              <el-option
                v-for="item in managerList"
                :key="item.manager"
                :label="item.manager"
                :value="item.manager"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="5">
          <el-form-item label="队列状态:" prop="queueStatus">
            <el-select
              v-model="formData.queueStatus"
              clearable
              placeholder="请选择队列状态"
              @change="fetchData"
            >
              <el-option
                v-for="item in queueStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="运行状态:" prop="runStatus">
            <el-select
              v-model="formData.runStatus"
              clearable
              placeholder="请选择运行状态"
              @change="fetchData"
            >
              <el-option
                v-for="item in runStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="日志状态:" prop="logStatus">
            <el-select
              v-model="formData.logStatus"
              clearable
              placeholder="请选择日志状态"
              @change="fetchData"
            >
              <el-option
                v-for="item in logStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="10" style=" margin-bottom: 8px;">
        <el-col :span="1.5">
          <el-button ref="fetchData" icon="el-icon-search" type="primary" size="mini" @click="fetchData">查询</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button ref="resetData" icon="el-icon-refresh" type="primary" size="mini" @click="resetData">重置</el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-table
      ref="tableList"
      v-loading="loading"
      :data="list"
      :header-cell-style="headStyle"
      :cell-style="cellStyle"
    >
      <el-table-column label="序号" width="50" align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="spiderName" label="爬虫名称" align="center" />
      <el-table-column prop="manager" label="负责人" align="center" width="120" />
      <el-table-column prop="taskName" label="任务名称" align="center" width="220" />
      <el-table-column prop="queueName" label="队列名称" align="center" width="200" />
      <el-table-column prop="queueStatus" label="队列状态" align="center" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.queueStatus === 0">
            无队列
          </el-tag>
          <el-tag v-else-if="scope.row.queueStatus === 1" type="success">
            正常
          </el-tag>
          <el-tag v-else-if="scope.row.queueStatus === 2" type="danger">
            停止
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="runStatus" label="运行状态" align="center" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.runStatus === 0" type="danger">
            已停止
          </el-tag>
          <el-tag v-else type="success">
            运行中
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="logStatus" label="日志状态" align="center" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.logStatus === 0" type="danger">
            异常
          </el-tag>
          <el-tag v-else type="success">
            正常
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="logPath" label="日志下载" align="center" width="150">
        <template slot-scope="scope">
          <el-button icon type="success" style="padding-right: 10px" size="mini" @click="linkoutlog(scope.row.scheduledId)">
            详情
          </el-button>
          <el-button icon type="primary" size="mini">
            <a :href="scope.row.logPath" rel="noreferrer noopener nofollow">
              下载
            </a>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="logTime" label="日志更新时间" align="center" width="110">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.logTime == 0" type="success">
            今天
          </el-tag>
          <el-tag v-if="scope.row.logTime != null && scope.row.logTime <= 3 && scope.row.logTime > 0" type="success">
            {{ scope.row.logTime }}天前
          </el-tag>
          <el-tag v-if="scope.row.logTime > 3 && scope.row.logTime <= 7" type="warning">
            {{ scope.row.logTime }}天前
          </el-tag>
          <el-tag v-if="scope.row.logTime > 7 && scope.row.logTime <= 15" type="info">
            {{ scope.row.logTime }}天前
          </el-tag>
          <el-tag v-if="scope.row.logTime > 15" type="danger">
            {{ scope.row.logTime }}天前
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="remarks" align="center" label="备注" width="200">
        <template slot-scope="scope">
          <el-input v-model="scope.row.remarks" type="textarea" autosize size="small" name="title" @change="updateRemarks(scope.row)" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      background
      :current-page="page"
      :total="total"
      :page-size="limit"
      :page-sizes="[10, 20, 50, 100]"
      prev-text="上一页"
      next-text="下一页"
      style="padding: 30px 0; text-align: center"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="changePageSize"
      @current-change="changeCurrentPage"
    />
  </div>
</template>
<script>
import variables from '@/styles/variables.scss'
import personApi from '@/api/person/person'
import { mapGetters } from 'vuex'

export default {
  name: 'PersonList',
  data() {
    return {
      total: 0, // 数据库总记录数
      page: 1, // 默认页码
      limit: 10, // 每页记录数
      formData: { // 表单数据
        spiderName: '',
        manager: '',
        queueStatus: '',
        runStatus: '',
        logStatus: ''
      },
      list: [], // 列表数据
      managerList: [], // 来源列表
      queueStatusList: [
        {
          value: 0,
          label: '无队列'
        },
        {
          value: 1,
          label: '正常'
        },
        {
          value: 2,
          label: '停止'
        }
      ], // 队列状态列表
      runStatusList: [
        {
          value: 0,
          label: '已停止'
        },
        {
          value: 1,
          label: '运行中'
        }
      ], // 运行状态列表
      logStatusList: [
        {
          value: 0,
          label: '异常'
        },
        {
          value: 1,
          label: '正常'
        }
      ], // 日志状态列表
      loading: false,
      rules: {

      }
    }
  },

  computed: {
    ...mapGetters([
      'id',
      'name',
      'roles',
      'person'
    ])
  },

  created() {
    this.fetchData()
    this.fetchList()
    this.formData.manager = this.person
  },

  methods: {
    fetchData() {
      this.loading = true
      personApi.listPage(this.page, this.limit, this.formData).then((response) => {
        this.list = response.data.result.list
        this.total = response.data.result.total
        this.loading = false
      })
      this.fetchList()
      this.$nextTick(() => {
        this.$refs.fetchData.$el.blur()
      })
    },

    fetchList() {
      personApi.getManagerList().then((response) => {
        this.managerList = response.data.result
      })
    },

    // 跳转定时任务日志界面
    linkoutlog(scheduledId) {
      const url = 'http://192.168.1.221:8080/xxl-job-admin/joblog?jobId=' + scheduledId
      window.open(url, '_blank', 'noreferrer,noopener')
    },

    // 下载定时任务日志文件
    downloadLog(logPath) {
      // personApi.downloadLog(logPath)
    },

    // 修改备注信息
    updateRemarks(row) {
      if (row.remarks) {
        const date = new Date()
        const year = date.getFullYear()
        const month = (date.getMonth() + 1).toString().padStart(2, '0')
        const day = date.getDate().toString().padStart(2, '0')
        const result = `${year}-${month}-${day}`
        row.remarks = row.remarks + ' ' + result
      } else {
        row.remarks = ''
      }
      personApi.updateRemarks(row.id, row.remarks).then((response) => {
        if (response.code === 200) {
          this.$message({
            message: '备注修改成功',
            type: 'success'
          })
          this.fetchData()
        }
      }).catch((err) => {
        this.$message({
          message: err.message,
          type: 'error'
        })
      })
    },

    resetData() {
      this.formData = {
        spiderName: '',
        manager: ''
      }
      this.page = 1
      this.limit = 10
      this.fetchData()
    },

    // 每页展示条数的改变，size：回调函数, 表示当前选中的展示条数
    changePageSize(size) {
      this.limit = size
      this.fetchData()
    },

    // 翻页，page：回调函数, 表示当前选中的页码
    changeCurrentPage(page) {
      this.page = page
      this.fetchData()
    },

    // 表头style
    headStyle() {
      return 'color: black; backgroundColor: ' + variables.globalStyle
    },

    // 列style
    cellStyle({ row, column, rowIndex, columnIndex }) {
      let style = 'height: 50px'
      const colorLevel = row.colorLevel
      if (colorLevel === 1) {
        style = 'height: 50px; background: #FFEE99'
      } else if (colorLevel === 2) {
        style = 'height: 50px; background: #FFCCCC'
      }
      return style
    }
  }
}
</script>

<style scoped>

</style>
